<template>
	<view class="invite column">
		<text class="justify-end" @click="navTo('pages/user/withdrawal/record')">提现记录</text>
		<view class="column bgf p38 radius30 mt20">
			<view class="align-center justify-between">
				<view class="column">
					<u-count-to :startVal="0" :endVal="userInfo.reward_amount" fontSize="50rpx" color="#000" bold
						:decimals="2" :duration="500" />
					<text class="color4 fs26 mt8">可用余额(元)</text>
				</view>
				<u-button text="提现" type="primary" @click="navTo('pages/user/withdrawal/index',{type:1})"
					:customStyle="{width:'170rpx',height:'70rpx',borderRadius:'15rpx',margin:'0'}" />
			</view>
			<u-divider lineColor="#F7F7F7" />
			<view class="centerV" @click="copyText(userInfo.code)">
				<text class="center code">{{ userInfo.code }} 点击复制</text>
			</view>
		</view>
		<view class="mt33 mb20 align-center justify-between">
			<text class="fs30 bold">可用余额明细</text>
			<text @click="navTo('pages/user/invite/record')">邀请记录</text>
		</view>
		<view class="flex-1 hb column hidden">
			<scroll-view class="hb ptb20" :scroll-y="true" :refresher-enabled="scrollViewTool.isEnabled"
				:refresher-triggered="scrollViewTool.triggered" refresher-background="rgba(0,0,0,0)"
				@refresherrefresh="pullDownRefresh" @refresherrestore="scrollViewTool.triggered = false" :upper-threshold="100"
				:lower-threshold="100" @refresherabort="triggered = false" @scrolltolower="reachBottom">
				<template v-if="listData.length > 0">
					<view class="list_item column" v-for="(item, index) in listData" :key="item.id"
						:style="{ animation: `zoom ${listDataDelay[index]}` }">
						<view class="align-center justify-between color0 bold">
							<text>张三(15700000001)</text>
							<text>+45.00元</text>
						</view>
						<view class="align-center justify-between mt10 fs24">
							<text>高级会员</text>
							<text>{{item.create_time}}</text>
						</view>
					</view>
					<u-loadmore :status="loadStatus" />
				</template>
				<view class="flex-1 hb centerV" v-else>
					<fr-empty-record />
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import { ref } from "vue";
	import {
		copyText,
		navTo,
		getUserInfo
	} from "@/core/app";
	import {
		getAccountRecord
	} from "@/api/user/index";
	import {
		useLoadPageList
	} from "@/hooks/useLoadPageList/useLoadPageList.js";
	
	
	const userInfo = ref({})
	function initUser() {
		userInfo.value = getUserInfo()
		console.log("用户信息", userInfo.value)
	}
	
	const {
		listData,
		listDataDelay,
		loadStatus,
		scrollViewTool,
		reachBottom,
		pullDownRefresh,
		reSetList,
	} = useLoadPageList(getAccountRecord, {
		category: 40
	});
	onLoad(() => {
		reSetList()
		initUser()
	})
</script>

<style lang="scss" scoped>
	.invite {
		padding: 36rpx 30rpx;
		width: calc(100% - 60rpx);
		height: calc(100% - 72rpx);

		.code {
			width: 438rpx;
			height: 84rpx;
			background: #F3F7FA;
			border-radius: 20rpx;
			color: #484848;
			font-size: 26rpx;
		}

		.list_item {
			color: #484848;
			background: #fff;
			padding: 27rpx 31rpx;
			border-radius: 20rpx;
			margin-bottom: 20rpx;
		}
	}
</style>